<template>
  <el-select
    v-model="value"
    @update:modelValue="emits('update:modelValue', $event)"
    :clearable="clearable"
    :disabled="disabled"
    :placeholder="placeholder || PlaceholderMap.select"
  >
    <el-option v-for="(item, index) in selectList" :key="index" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {PlaceholderMap, SelectOptionsMap} from '../constants';
import {IFromItem, ISelectMapKey, ISelectOptionItem} from '../type';

type modelValue = ISelectOptionItem['value'] | '';

const props = defineProps<{
  modelValue: modelValue;
  options?: ISelectOptionItem[];
  clearable?: boolean;
  disabled?: boolean;
  placeholder?: string;
  formItem?: IFromItem;
}>();
const emits = defineEmits<{
  (_e: 'update:modelValue', _value: modelValue): void;
}>();

const selectList = ref<ISelectOptionItem[]>(props.formItem ? SelectOptionsMap[props.formItem.type as ISelectMapKey] : props.options || []);

const value = ref(props.modelValue);
</script>
